<template>
  <el-form :inline="true" :model="activityQuery" :rules="activityRules">

    <el-form-item label="负责人">
      <el-select
          v-model="activityQuery.ownerId"
          placeholder="请选择负责人"
          clearable
          @click="loadOwner"
      >
        <el-option
            v-for="item in ownerOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <el-form-item label="活动名称">
      <el-input v-model="activityQuery.name" placeholder="请输入活动名称" clearable />
    </el-form-item>


    <el-form-item label="活动时间">
      <el-date-picker
          v-model="activityQuery.activityTime"
          type="datetimerange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
      />
    </el-form-item>

    <el-form-item label="活动预算" prop="cost">
      <el-input v-model="activityQuery.cost" placeholder="请输入活动预算" clearable />
    </el-form-item>

    <el-form-item label="创建时间">
      <el-date-picker
        v-model="activityQuery.createTime"
        type="datetime"
        placeholder="请选择创建时间"
        value-format="YYYY-MM-DD HH:mm:ss"
    />
    </el-form-item>


    <el-form-item>
      <el-button type="primary" @click="onSearch">搜索</el-button>
      <el-button type="primary" plain @click="onReset">重置</el-button>
    </el-form-item>
  </el-form>
  <el-button type="primary" @click="add">录入市场活动</el-button>
  <el-button type="danger" @click="batchDel">批量删除</el-button>
  <el-table
      :data="activityList"
      style="width: 100%"
      @selection-change="handleSelectionChange">

    <el-table-column type="selection" width="55"/>
    <el-table-column type="index" label="序号" width="60"/>
    <el-table-column property="ownerDO.name" label="负责人"/>
    <el-table-column property="name" label="活动名称" show-overflow-tooltip/>
    <el-table-column property="startTime" label="开始时间" show-overflow-tooltip/>
    <el-table-column property="endTime" label="结束时间" show-overflow-tooltip/>
    <el-table-column property="cost" label="活动预算" show-overflow-tooltip/>
    <el-table-column property="createTime" label="创建时间" show-overflow-tooltip/>
    <el-table-column label="操作" width="230">
      <template #default="scope">
        <el-button type="primary" @click="view(scope.row.id)">详情</el-button>
        <el-button type="success" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      background layout="prev, pager, next"
      :page-size = "pageSize"
      :total="total"
      @prev-click="toPage"
      @next-click="toPage"
      @current-change="toPage"/>
</template>

<script>
import {doDelete, doGet, doPost, doPut} from "../http/httpRequest.js";
import {messageConfirm, messageTip} from "../util/util.js";

export default {
  name: "ActivityView",

  data(){
    return{
      //市场活动对象
      activityQuery:{},
      activityList:[{
        ownerDO:{}
      }],
      total: 0,
      pageSize:0,
      //负责人的下拉列表数据
      ownerOptions:[{}],
      //定义活动规则
      activityRules:{
        cost:[
      { pattern : /^[0-9]+(\.[0-9]{2})?$/, message: '活动预算必须是整数或者两位小数', trigger: 'blur'}
        ]
      }
    }
  },

  mounted() {
    this.getData(1);
  },

  methods: {
    //勾选或者取消勾选 触发该函数 selectionDataArray勾选的数据集合数组
    handleSelectionChange(selectionDataArray) {
      this.userIdArray = [];
      selectionDataArray.forEach(data => {
        let userId = data.id;
        this.userIdArray.push(userId);
      })
    },
    //查询活动列表
    getData(current) {
      //开始时间
      let startTime = '';
      //结束时间
      let endTime = '';
      for (let key in this.activityQuery.activityTime){
        if (key === '0'){
          startTime = this.activityQuery.activityTime[key];
        }
        if (key === '1'){
          endTime = this.activityQuery.activityTime[key];
        }
      }
      console.log(this.activityQuery.createTime);
      console.log(startTime);
      console.log(endTime);
      doGet("/api/activities", {
        current: current,
        ownerId:this.activityQuery.ownerId,
        cost:this.activityQuery.cost,
        createTime:this.activityQuery.createTime,
        name : this.activityQuery.name,
        startTime:startTime,
        endTime:endTime
      }).then((response) => {
        if (response.data.code === 200) {
          this.activityList = response.data.data.list;
          this.total = response.data.data.total;
          this.pageSize = response.data.data.pageSize;
        }
      })
    },
    //分页函数 elementplus会自动向toPage传递当前页这个值
    toPage(current) {
      this.getData(current);
    },
    //加载负责人
    loadOwner(){
      doGet("/api/owner",{}).then((response) => {
        if (response.data.code === 200) {
          this.ownerOptions = response.data.data;
        }
      })
    },
    onSearch(){
      this.getData(1);
    },
    //搜索条件重置（清空）
    onReset() {
      this.activityQuery = {};
    },
    //录入市场活动
    add(){
      this.$router.push("/dashboard/activity/add");
    },
    //编辑市场活动
    edit(id){
      this.$router.push("/dashboard/activity/edit/"  + id);
    },

    //查看详情
    view(id) {
      this.$router.push("/dashboard/activity/" + id);
    }

  }
}
</script>

<style scoped>
.el-form{
  margin-bottom: 20px;
}
.el-select{
  width: 192px;
}
.el-pagination{
  margin-top: 10px;
}
.el-table{
  margin-top: 10px;
}
</style>